<template>
  <view class="container">
    <view class="product-header">
      <text class="product-title">免费换玻璃大礼包</text>
      <view class="price-info">
        <text class="current-price">20积分</text>
        <text class="market-price">市场价: ￥30</text>
        <text class="stock">库存: 10</text>
      </view>
    </view>

    <view class="product-introduction">
      <text class="section-title">商品介绍</text>
      <view class="product-details">
        <view>商品名称: 免费换窗户</view>
        <view>商品型号: 标准套装</view>
    
      </view>
  
    </view>

    <view class="notice">
      <text class="notice-title">温馨提示</text>
      <view class="notice-content">
        <text>1. 商品为虚拟品，购买后不提供实物发货，有疑问请联系客服。</text>
        <text>2. 兑换商品将在3个工作日内发货，实际时间根据物流公司为准。</text>
        <text>3. 兑换后不可取消订单，感谢理解。</text>
      </view>
    </view>

    <button class="buy-button">立即兑换</button>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style>
.container {
  padding: 16px;
  background-color: #fff;
}

.product-header, .product-introduction, .notice {
  margin-bottom: 20px;
}

.product-title {
  font-size: 18px;
  font-weight: bold;
}

.price-info {
  margin-top: 8px;
  color: #ff0000;
}

.current-price {
  font-size: 16px;
}

.market-price, .stock {
  font-size: 14px;
  color: #999;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.product-details {
  margin-bottom: 12px;
  color: #333;
}

.product-image {
  width: 100%;
  height: auto;
}

.notice-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.notice-content {
  color: #777;
}

.buy-button {
  width: 100%;
  padding: 12px;
  background-color: #1e90ff;
  color: #fff;
  text-align: center;
  font-size: 16px;
  border-radius: 4px;
}
</style>
